#include("/template/common/layout/_page_layout.html")
#@layout()

#define css()
<!--Bootstrap jquery.nestable [ SAMPLE ]-->
<!--<link href="#(RESOURCE_HOST)/static/css/demo/nestable.css" rel="stylesheet"></link>-->
<!-- <link href="#(RESOURCE_HOST)/static/plugins/magic-check/css/magic-check.min.css" rel="stylesheet"> -->
<!--<link href="#(RESOURCE_HOST)/static/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">-->

<link href="#(RESOURCE_HOST)/static/plugins/jstree/themes/default/style.min.css" rel="stylesheet">

<!--Select2 [ OPTIONAL ]-->
<link href="#(RESOURCE_HOST)/static/plugins/select2/css/select2.min.css" rel="stylesheet">

<!--Switchery [ OPTIONAL ]-->
<link href="#(RESOURCE_HOST)/static/plugins/switchery/switchery.min.css" rel="stylesheet">

<!--Bootstrap Validator [ OPTIONAL ]-->
<link href="#(RESOURCE_HOST)/static/plugins/bootstrap-validator/bootstrapValidator.min.css" rel="stylesheet">

<style>
    .input-icon {
        position: relative;
    }

    .input-icon input {
        padding-left: 33px !important;
        color: #999999;
    }

    .input-icon i {
        color: #999999;
        display: block;
        position: absolute;
        margin: 10px 2px 4px 10px;
        width: 16px;
        height: 16px;
        font-size: 16px;
        text-align: center;
    }

    .input-icon.right input {
        padding-left: 12px !important;
        padding-right: 33px !important;
    }

    .input-icon.right i {
        right: 8px;
        float: right;
    }

    .mbm {
        margin-bottom: 10px !important;
    }
</style>
#end

#define js()
<script src="#(RESOURCE_HOST)/static/js/demo/AppUtils.js"></script>
<!--Bootstrap jquery.nestable [ SAMPLE ]-->
<!--<script src="#(RESOURCE_HOST)/static/plugins/nestable/jquery.nestable.js"></script>-->
<script src="#(RESOURCE_HOST)/static/js/demo/select2-Utils.js"></script>

<script src="#(RESOURCE_HOST)/static/js/demo/switchery-Utils.js"></script>

<script src="#(RESOURCE_HOST)/static/js/sysres/sys_res.js"></script>

<!--Bootstrap Select [ OPTIONAL ]-->
<!--<script src="#(RESOURCE_HOST)/static/plugins/bootstrap-select/bootstrap-select.js"></script>-->
<!--Select2 [ OPTIONAL ]-->
<script src="#(RESOURCE_HOST)/static/plugins/select2/js/select2.min.js"></script>
<!--Switchery [ OPTIONAL ]-->
<script src="#(RESOURCE_HOST)/static/plugins/switchery/switchery.min.js"></script>
<!--jsTree [ OPTIONAL ]-->
<script src="#(RESOURCE_HOST)/static/plugins/jstree/jstree.min.js"></script>
<!--Bootstrap Validator [ OPTIONAL ]-->
<script src="#(RESOURCE_HOST)/static/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>
<!--Masked Input [ OPTIONAL ]-->
<script src="#(RESOURCE_HOST)/static/plugins/masked-input/jquery.maskedinput.min.js"></script>
<!--Form validation [ SAMPLE ]-->
<script src="#(RESOURCE_HOST)/static/js/demo/form-validation.js"></script>
<script>
    //iframe 页面高度调整 cmchen 2018.06.20 start
    $(document).ready(function (e) {

        setHeight();

        $(window).resize(function () {
            setHeight();
        });

    });
    //iframe 页面高度调整 cmchen 2018.06.20 end

    var setHeight = function () {
        var height = document.documentElement.clientHeight;
        $(".pre-scrollable").css("max-height", height - 220);
    }
</script>

#end

#define content()

<!--Page content-->
<!--===================================================-->
<div id="page-content">

    <!--===================================================-->

    <div class="fixed-fluid">

        <!-- 左侧树结构 -->
        <div class="col-sm-6 col-md-4 col-lg-4">
            <div class="panel">
                <div class="pad-all bord-btm">
                    <div class="btn-group btn-group-justified">
                        <a href="javascript:void(0)" class="btn btn-lg btn-info">#(_res.get("i18n_ADD"))</a>
                        <a href="javascript:void(0)" class="btn btn-lg btn-danger">#(_res.get("i18n_Delete"))</a>
                        <!--   <a href="javascript:void(0)" class="btn btn-lg btn-success">保存排序</a>-->
                    </div>
                </div>

                <div class="panel-heading">
                    <div class="panel-control">
                        <ul id="nestable-menu" class="pager pager-rounded">
                            <!--<button type="button" data-action="expand-all" class="btn btn-mint">全部展开</button>-->
                            <button type="button" data-action="collapse-all" class="btn btn-info btn-success">收起全部
                            </button>
                        </ul>
                    </div>
                    <h3 class="panel-title">菜单列表</h3>
                </div>

                <div class="input-icon right"><i class="fa fa-search"></i>
                    <input id="input-tree" type="text" value="" placeholder="Search here..."
                           class="form-control input-sm mbm"/>
                </div>
                <div id="res_tree" class="pre-scrollable">

                </div>
                <p class="pad-hor text-main text-bold"></p>
                <!-- </div> -->
            </div>
        </div>
        <!-- 右侧页面 -->
        <div class="col-sm-6 col-md-8 col-lg-8">
            <div class="panel">
                <form id="res" class="form-horizontal bv-form" action="#" method="post">
                    <div id="res-panel" class="panel-body">
                        <h1 class="page-header text-overflow pad-btm">#(_res.get("i18n_Edit"))</h1>

                        <hr class="hr-sm">

                        <!--===================================================-->
                        <fieldset>
                            <div class="panel-body">
                                <div class="form-group hidden">
                                    <label class="col-lg-3 control-label">id</label>
                                    <div class="col-lg-7">
                                        <input type="text" id="id" class="form-control" name="id" placeholder="id">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">菜单名称</label>
                                    <div class="col-lg-7">
                                        <input type="text" id="" class="form-control" name="name" placeholder="菜单名称"
                                               autofocus="autofocus">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label" for="type">菜单/方法</label>
                                    <div class="col-lg-7">
                                        <!--Switchery : Checked-->
                                        <!--===================================================-->
                                        <select id="type" class="form-control" name="type">
                                            <option value="1" selected>菜单</option>
                                            <option value="2">权限</option>
                                        </select>
                                        <!--===================================================-->
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">图标</label>
                                    <div class="col-lg-7">
                                        <input type="text" class="form-control" name="iconCls" placeholder="图标">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">URL</label>
                                    <div class="col-lg-7">
                                        <input type="text" class="form-control" name="url" placeholder="URL">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">排序</label>
                                    <div class="col-lg-7">
                                        <input type="text" class="form-control" name="seq" placeholder="排序">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">上级菜单</label>
                                    <div class="col-lg-7">
                                        <!--<select id="loaddepart" class="selectpicker" data-live-search="true" name="parent" data-width="100%">-->
                                        <!--<option value="0">no thing select</option>-->
                                        <!--</select>-->
                                        <select id="loadRes" class="form-control" data-width="100%" name="pid"></select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-lg-3 control-label" for="des">菜单描述</label>
                                    <div class="col-lg-7">
                                        <textarea id="des" rows="9" name="des" class="form-control"
                                                  placeholder="菜单描述"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label" for="status">是否启用</label>
                                    <div class="col-lg-7">
                                        <!--Switchery : Checked-->
                                        <!--===================================================-->
                                        <input id="status" class="form-control" type="checkbox" name="status" checked>
                                        <!--===================================================-->
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <!--===================================================-->
                        <!--</div>-->


                    </div>
                    <div class="panel-footer">
                        <div class="row">
                            <div class="col-sm-7 col-sm-offset-3">
                                <button class="btn btn-mint" type="submit" id="submit">#(_res.get("i18n_Submit"))
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
    <!--===================================================-->

</div>
<!--===================================================-->
<!--End page content-->


<button class="scroll-top btn">
    <i class="pci-chevron chevron-up"></i>
</button>

<!--</div>-->

#end